﻿@{
    ViewBag.Title = "SimpleSprite";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Simple Sprite</h2>

<canvas id='canvas' width='650' height='375'>
    Canvas not supported
</canvas>

<script src = '/JsLib/zeus/game/zeus.sprites.js'></script>
<script src = '/JsLib/zeus/canvas/zeus.canvas.widgets.js'></script>
<script type="text/javascript">
    var context = document.getElementById('canvas').getContext('2d'),
    RADIUS = 75,
    ball = new Sprite('ball',
      {
          paint: function (sprite, context) {
              context.beginPath();
              context.arc(sprite.left + sprite.width / 2,
                          sprite.top + sprite.height / 2,
                          RADIUS, 0, Math.PI * 2, false);
              context.clip();

              context.shadowColor = '#008000';
              context.shadowOffsetX = -4;
              context.shadowOffsetY = -4;
              context.shadowBlur = 8;

              context.lineWidth = 2;
              context.strokeStyle = '#008000';
              context.fillStyle = 'rgba(30,144,255,0.15)';
              context.fill();
              context.stroke();
          }
      }
    );

    var width = context.canvas.width;
    var height = context.canvas.height;
    drawGrid('#008000', width, height, 10, 10);

    ball.left = 320;
    ball.top = 160;
    ball.paint(context);
</script>